<!DOCTYPE html>
<html lang="en">
<!--京东商城后台管理系统-->
<head>
    <meta charset="UTF-8">
    <title>管理商品种类</title>
    <link rel="stylesheet" href="js/bootstrap.min.css">
    <!--<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
        $(function () {
            var pageNum = 1;
            var pageMax = null;
            var pageSize = 4;
            //获取count
            $.ajax({
                url :"http://localhost:8080/sort2PageCount",
                type:"post",
                dataType:"text",
                success : function (count){
                    if(parseInt(count)>4)
                    {
                        pageMax= Math.ceil(parseInt(count)/4)
                        // alert(pageMax);
                        for(var j =0;j<pageMax;j++){
                            vm1.pages.push({
                                pageNum:j+1
                            })
                        }
                    }
                }
            });
            //分页实现

            //1. 默认页面
            ajax();

            var vm1 = new Vue({
                el: '#app',
                data: {
                    pages: []
                },
                methods:{
                    pageUp:function () {
                        if(pageNum>1){
                            pageNum--;
                            $("#tree").remove();
                            vm.sortList = [];
                            ajax();
                        }
                        else{
                            alert("没有上一页啦！")
                        }
                    },
                    pageDown:function () {
                        if(pageNum<pageMax){
                            pageNum++;
                            $("#tree").remove();
                            vm.sortList = [];
                            ajax();
                        } else{
                            alert("已经事最后一页了")
                        }
                    },
                    pageIndex:function (index) {
                        pageNum = index+1;
                        $("#tree").remove();
                        vm.sortList = [];
                        ajax();
                    }
                }
            });


           function ajax(){
               $.ajax({
                   url: "http://localhost:8080/getAllSort",
                   type: "post",
                   data: {"pageNum": pageNum, "pageSize": pageSize},
                   dataType: "json",
                   success: function (data){
                       // $("#tree").remove();
                       for (var i = 0; i < data.length; i++){
                           vm.sortList.push({
                               sortId: data[i].sortId,
                               sortName: data[i].sortName,
                           })
                       }
                   }
               });
           }
           var vm =  new Vue({
                el:"#textChange",
                data:{
                    sortList:[]
                },
                // created:function (){
                //     var self = this;
                //     $.ajax({
                //         url:'http://localhost:8080/getAllSort',
                //         type:'post',
                //         data:{"pageNum":pageNum,"pageSize":pageSize},
                //         dataType:'json'
                //     }).then(function (res) {
                //         console.log(res);
                //         $("#tree").remove();
                //         self.sortList = res;
                //     }).fail(function () {
                //         console.log('失败');
                //     })
                // },
                methods:{
                    update:function (index) {
                        var sordId =this.sortList[index].sortId;
                        $("button[name='commit']").click(function () {
//                    alert($("input[name='changeName']").val());
                            $.ajax({
                                url:'http://localhost:8080/updateSort',
                                type:'post',
                                data:{
                                    sortId:sordId,
                                    sortName:$("input[name='changeName']").val()
                                },
                                dataType:'json',
                                success:function (data) {
                                    if(data===1){
                                        alert("修改成功！");
                                        location.href="http://localhost:8080/sort2.html";
                                    }else {
                                        alert("不能输入已存在的类别！");
                                    }
                                }
                            });
                        });
                    },
                    del:function (index) {
                        $.ajax({
                            url:'http://localhost:8080/delSort',
                            type:'post',
                            data:{
                                sortId: this.sortList[index].sortId
                            },
                            dataType:'json',
                            success:function () {
                                location.href="http://localhost:8080/sort2.html";
                            }
                        });
                    }
                }
            });


        })
    </script>
</head>
<body >
<div class="row">
    <div class="col-md-2">
        <img src="images/logo-201305-b.png" >
    </div>
    <div class="col-md-10">
        <h2 class="text-primary text-center">京东商城后台管理系统</h2>
    </div>
</div>

<div class="row"  style="background-color:#F5F5F5;">
    <!--侧边菜单-->
    <div class="col-md-2 text-center" >
        <a href="#" class="list-group-item active">商品种类管理</a>
        <a href="sort1.html" class="list-group-item">添加商品种类</a>
        <a href="sort2.html" class="list-group-item color">管理商品种类</a>
        <a href="sort3.html" class="list-group-item">商品品牌管理</a>
        <a href="sort4.html" class="list-group-item">商品品牌查询</a>
        <a href="#" class="list-group-item active">商品管理</a>
        <a href="product_add.html" class="list-group-item">商品添加</a>
        <a href="product_delete.html" class="list-group-item">商品删除</a>
        <a href="product_change.html" class="list-group-item">商品修改</a>
        <a href="product_select.html" class="list-group-item  color">商品查询</a>
        <a href="product_addImg.html" class="list-group-item">商品图片添加</a>
        <a href="#" class="list-group-item active">订单管理</a>
        <a href="orders_select.html" class="list-group-item">查看订单</a>
        <a href="orders_change.html" class="list-group-item">修改订单</a>
        <a href="#" class="list-group-item active">用户管理</a>
    </div>
    <div class="col-md-10">
        <!--面包屑导航-->
        <ol class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">商品种类管理</a></li>
            <li><a href="#">管理商品种类</a></li>
            <!--<li class="active">十一月</li>-->
        </ol>
        <div  id="textChange"  style="margin-top: 130px;margin-right: 20px">
            <table class="table table-striped table-bordered text-center">
                <thead >
                <tr >
                    <th class="bg-primary text-center" >商品种类编号</th>
                    <th class="bg-primary text-center" >商品种类名称</th>
                    <th class="bg-primary text-center" width="15%" >操作</th>
                    <th class="bg-primary text-center"  width="15%">操作</th>
                </tr>
                </thead>
                <tbody id="#tree">
                <tr v-for="(list,index) in sortList" >
                    <td style="vertical-align:middle;">{{list.sortId}}</td>
                    <td style="vertical-align:middle;">{{list.sortName}}</td>
                    <td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" @click="update(index)">修改</button></td>
                    <td><button type="button" class="btn btn-danger" @click="del(index)">删除</button></td>
                </tr>
                </tbody>
            </table>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel" >请输入修改后的商品种类名称</h4>
                        </div>
                        <div class="modal-body">
                            <input type="text"  class="form-control" id="changeName" name="changeName">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="commit" name="commit">提交更改</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页-->

        <ul class="pagination" id="app">
            <li><a href="javascript:void(0)" @click="pageUp">&laquo;</a></li>
            <li id="page1"v-for="(page,index) in pages"@click="pageIndex(index)"><a href="#" >{{page.pageNum}}</a></li>
            <li><a href="javascript:void(0)" @click="pageDown">&raquo;</a></li>
        </ul>


    </div>
</div>


</body>

</html>